<script setup lang="ts">
// 库存金额
import { storeToRefs } from 'pinia'
import { reactive, watch } from 'vue'
import EchartBar from '@/components/Echart/Bar/LiuSingleBar.vue'
import { useSupplyStore } from '@/stores/module/supply'
import { isMobile } from '@/Utils/global'

const props = defineProps({
  level: {
    type: Number,
    default: 1,// 1全球 2区域 3国家
  },
})

const supplyStore = useSupplyStore() // 创建store实例
const { sthMoneyBar } = storeToRefs(supplyStore)
const top = isMobile() ? '40%':'36%'

const options = reactive({
  name: 'SthMoneyBar',
  data: sthMoneyBar.value.info || [],
  suffix: sthMoneyBar.value.suffix || '',// 统一的后缀,如果没有就不加..用户鼠标放上去的显示
  // 加了翻页 如果是国家的时候显示4个,其他的显示5个
  paginate: {
    pageSize: props.level==3?4:5
  }
})
watch(
  () => sthMoneyBar.value,
  () => {
    if(sthMoneyBar.value.info && sthMoneyBar.value.info.length>0){
      options.data.splice(0,options.data.length,...sthMoneyBar.value.info)
    }else{
      options.data.splice(0,options.data.length)
    }
  },
  { deep: true }
)
</script>
<template>
  <card-box componentName="SthMoneyBar">
    <template v-slot:title>
      <h1>{{ sthMoneyBar.title || '' }}</h1>
    </template>
    <EchartBar :chart-data="options" v-if="sthMoneyBar.info?.length"/>
    <div v-else class="default-img">
      <p>{{ $t('bi_common_nodata' )}}</p>
    </div>
  </card-box>
</template>
<style lang="scss" scoped>
.default-img {
  width: 100%;
  text-align: center;
  padding: 120px 0;
  background-image: url('@/assets/images/canvsimage/default.png');
  background-repeat: no-repeat;
  background-position: center;

  font-size: 16px;
  color: #00f6ff;
}
</style>

